<script lang="ts" setup>
import { onMounted, onUnmounted, ref, watch } from "vue";
import JButtons from "@/components/j-buttons/index.vue";

const emit = defineEmits(["change"]);

/**nva按钮数据类型 */
interface BtnsType {
    label: string;
    value: string | null;
}

enum CTYPE {
    area = `<span class="iconfont icon-gupiao"></span>`,
    solid = `<span class="mdi mdi-chart-line"></span>`
    // solid = `<span class="iconfont icon-gupiao1"></span>`
}

/**时间nav按钮数据 */
const btnsData = [
    {
        label: "H",
        value: "H"
    },
    {
        label: "D",
        value: "D"
    },
    {
        label: CTYPE.solid,
        value: "line"
    }
];

const btns = ref<BtnsType[]>(btnsData);
const idx = ref(btns.value[0]);

const onTypeChange = (t: any) => {
    // console.log('yzt 按钮切换==========>', t);
    if (t.value == "line") {
        let label = btns.value[2].label;
        btns.value[2].label = label == CTYPE.area ? CTYPE.solid : CTYPE.area;
    }
    emit("change", t);
};
</script>

<template>
    <JButtons :list="btns" v-model="idx" @change="onTypeChange"></JButtons>
</template>

<style lang="less" scoped>
@import url("./index.less");
</style>
